<script setup lang="ts">
const props = defineProps({
	active: {
		type: Number,
		required: true
	},
	items: {
		type: Array,
		default: () => [],
		required: true
	},
})

const emits = defineEmits(['click'])



const handleClick = (index: number) => {
	emits('click', index)
}
</script>

<template>
	<div class="my-type">
		<ul>
			<li :class="{'type-active': props.active == index}" @click="handleClick(index)" v-for="(item,index) in props.items">
				<span>{{ item.name ?? item }}</span>
			</li>
		</ul>
	</div>
</template>

<style scoped>
@media screen and (max-width: 960px) {
	.my-type {
		width: 49px !important;
	}
}
.my-type {
	width: 120px;
	background-color: #FFFFFF;
	margin-top: 1px;
}
.type-active {
	background: #FC661C;
	color: #FFFFFF;
}
.my-type ul {
	padding: 0;
}
.my-type ul li {
	padding: 15px;
	text-align: center;
	cursor: pointer;
	font-family: Microsoft YaHei, Microsoft YaHei;
	font-weight: 400;
	font-style: normal;
	text-transform: none;
}
</style>